<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>墨白的统计分析模块</title>
    <meta name="generator" content="HTMLTestRunner 0.8.3"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
<style type="text/css" media="screen">
body        { font-family: verdana, arial, helvetica, sans-serif; font-size: 80%; }
table       { font-size: 100%; }
pre  { 
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* -- heading ---------------------------------------------------------------------- */
h1 {
	font-size: 16pt;
	color: gray;
}
.heading {
    float:left;
    width:30%;
    margin-top: 0ex;
    margin-bottom: 1ex;
}
.heading .attribute {
    margin-top: 1ex;
    margin-bottom: 0;
}
.heading .description {
    margin-top: 4ex;
    margin-bottom: 6ex;
}
/* -- css div popup ------------------------------------------------------------------------ */
a.popup_link {
}
a.popup_link:hover {
    color: red;
}
.img{
	height: 100%;
	border-collapse: collapse;
    border: 2px solid #777;
}
.screenshots {
    z-index: 100;
	position:fixed;
	height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	display: none;
}
.imgyuan{
    height: 20px;
    border-radius: 12px;
    background-color: red;
    padding-left: 13px;
    margin: 0 auto;
    position: relative;
    top: -40px;
    background-color: rgba(1, 150, 0, 0.3);
}
.imgyuan font{
    border:1px solid white;
    width:11px; 
    height:11px;
    border-radius:50%;
    margin-right: 9px;
    margin-top: 4px;
    display: block;
    float: left;
    background-color: white;
}
.close_shots {
    background-image: url();
    background-size: 22px 22px;
    -moz-background-size: 22px 22px;
    background-repeat: no-repeat;
    position: absolute;
    top: 5px;
    right: 5px;
    height: 22px;
    z-index: 99;
    width: 22px;
}
.popup_window {
    display: none;
    position: relative;
    left: 0px;
    top: 0px;
    padding: 10px;
    background-color: #E6E6D6;
    font-family: "Lucida Console", "Courier New", Courier, monospace;
    text-align: left;
    font-size: 8pt;
}
}
/* -- report ------------------------------------------------------------------------ */
#show_detail_line {
    float:left;
    width:100%;
    margin-top: 3ex;
    margin-bottom: 1ex;
}
#result_table {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;
    background:  #FFF;
    color:  #024457;
    border-radius:   10px;
    border: 1px solid #167F92;
}
#result_table th {
      border: 1px solid #FFFFFF;
      background-color: #167F92;
      color: #FFF;
      padding: 0.5em;
      &:first-child {
        display: table-cell;
        text-align: center;
      }
      &:nth-child(2) {
        display: table-cell;
        span {display:none;}
        &:after {content:attr(data-th);}
      }
      @media (min-width: 480px) {
        &:nth-child(2) {
          span {display: block;}
          &:after {display: none;}
        }
      }
    }
#result_table td {
       word-wrap: break-word;
      max-width: 7em;
      padding: 0.3em;
      &:first-child {
        display: table-cell;
        text-align: center;
      }
      @media (min-width: 400px) {
        border: 1px solid #D9E4E6;
      }
    }
#result_table  th, td {
      margin: .5em 1em;
      @media (min-width: 400px) {
        display: table-cell;
        padding: 1em;
      }
    }
#total_row  { font-weight: bold; }
.passClass  { background-color: #6c6;  !important ;}
.failClass  { background-color: #c60;  !important ;}
.errorClass { background-color: #c00; !important ; }
.passCase   { color: #6c6; }
.failCase   { color: #c60; font-weight: bold; }
.errorCase  { color: #c00; font-weight: bold; }
.skipCase  { color:#908e8e; font-weight: bold; }
tr[id^=pt]  td { background-color: rgba(73,204,144,.3) !important ; }
tr[id^=ft]  td { background-color: rgba(252,161,48,.3) !important; }
tr[id^=et]  td { background-color: rgba(249,62,62,.3) !important ; }
tr[id^=st]  td { background-color: #6f6f6fa1 !important ; }
.hiddenRow  { display: none; }
.testcase   { margin-left: 2em; }
/* -- ending ---------------------------------------------------------------------- */
#ending {
}
.detail_button {
    width: 130px;
    text-decoration: none;
    line-height: 38px;
    text-align: center;
    font-weight: bold;
    color: #ffff;
    border-radius: 6px;
    padding: 5px 10px 5px 10px;
    position: relative;
    overflow: hidden;
}
.detail_button.abstract{background-color: #4dbee8;}
.detail_button.passed{  background-color: #66cc66;}
.detail_button.failed{  background-color: #cc6600;}
.detail_button.errored{ background-color: #f54f4f;}
.detail_button.skiped{ background-color: gray;}
.detail_button.all{ background-color: blue;}
.piechart{  
    width: 200px;
    float: left;
    display:  inline;
}
</style>

</head>
<body>
<script language="javascript" type="text/javascript">
output_list = Array();
/* level - 0:Summary; 1:Passed; 2:Failed; 3:Errored; 4:Skiped; 5:All */
function showCase(level,channel) {
    trs = document.getElementsByTagName("tr");
    for (var i = 0; i < trs.length; i++) {
        tr = trs[i];
        id = tr.id;
        if (["ft","pt","et","st"].indexOf(id.substr(0,2))!=-1){
           if ( level ==0 && id.substr(2,1)==channel ) {
                tr.className = 'hiddenRow';
            }
        }
        if (id.substr(0,3) == 'pt'+channel) {
            if ( level==1){
                tr.className = '';
            }
            else if  (level>4 && id.substr(2,1)==channel ){
                tr.className = '';
            }
            else {
                tr.className = 'hiddenRow';
            }
         }
        if (id.substr(0,3) == 'ft'+channel) {
            if (level ==2) {
                tr.className = '';
            }
            else if  (level>4 && id.substr(2,1)==channel ){
                tr.className = '';
            }
            else {
                tr.className = 'hiddenRow';
            }
          }
        if (id.substr(0,3) == 'et'+channel) {
            if (level ==3) {
                tr.className = '';
            }
            else if  (level>4 && id.substr(2,1)==channel ){
                tr.className = '';
            }
            else {
                tr.className = 'hiddenRow';
            }
        }
        if (id.substr(0,3) == 'st'+channel) {
            if (level ==4) {
                tr.className = '';
            }
            else if  (level>4 && id.substr(2,1)==channel ){
                tr.className = '';
            }
            else {
                tr.className = 'hiddenRow';
            }
        }
    }
}
function showClassDetail(cid, count) {
    var id_list = Array(count);
    var toHide = 1;
    for (var i = 0; i < count; i++) {
        tid0 = 't' + cid.substr(1) + '.' + (i+1);
        tid = 'f' + tid0;
        tr = document.getElementById(tid);
        if (!tr) {
            tid = 'p' + tid0;
            tr = document.getElementById(tid);
        }
        if (!tr) {
            tid = 'e' + tid0;
            tr = document.getElementById(tid);
        }
        if (!tr) {
            tid = 's' + tid0;
            tr = document.getElementById(tid);
        }
        id_list[i] = tid;
        if (tr.className) {
            toHide = 0;
        }
    }
    for (var i = 0; i < count; i++) {
        tid = id_list[i];
        if (toHide) {
            document.getElementById(tid).className = 'hiddenRow';
        }
        else {
            document.getElementById(tid).className = '';
        }
    }
}
function showTestDetail(div_id){
    var details_div = document.getElementById(div_id)
    var displayState = details_div.style.display
    // alert(displayState)
    if (displayState != 'block' ) {
        displayState = 'block'
        details_div.style.display = 'block'
    }
    else {
        details_div.style.display = 'none'
    }
}
function html_escape(s) {
    s = s.replace(/&/g,'&amp;');
    s = s.replace(/</g,'&lt;');
    s = s.replace(/>/g,'&gt;');
    return s;
}
function drawCircle(circle, pass, fail, error, skip){ 
    var color = ["#6c6","#c60","#c00","#808080"];  
    var data = [pass,fail,error,skip]; 
    var text_arr = ["Pass", "Fail", "Error","Skip"];
    var canvas = document.getElementById(circle);  
    var ctx = canvas.getContext("2d");  
    var startPoint=0;
    var width = 20, height = 10;
    var posX = 112 * 2 + 20, posY = 30;
    var textX = posX + width + 5, textY = posY + 10;
    for(var i=0;i<data.length;i++){  
        ctx.fillStyle = color[i];  
        ctx.beginPath();  
        ctx.moveTo(112,84);   
        ctx.arc(112,84,84,startPoint,startPoint+Math.PI*2*(data[i]/(data[0]+data[1]+data[2])),false);  
        ctx.fill();  
        startPoint += Math.PI*2*(data[i]/(data[0]+data[1]+data[2]));  
        ctx.fillStyle = color[i];  
        ctx.fillRect(posX, posY + 20 * i, width, height);  
        ctx.moveTo(posX, posY + 20 * i);  
        ctx.font = 'bold 14px';
        ctx.fillStyle = color[i];
        var percent = text_arr[i] + ":"+data[i];  
        ctx.fillText(percent, textX, textY + 20 * i);  
    }
}
function show_img(obj) {
    var obj1 = obj.nextElementSibling
    obj1.style.display='block'
    var index = 0;//每张图片的下标，
    var len = obj1.getElementsByTagName('img').length;
    var imgyuan = obj1.getElementsByClassName('imgyuan')[0]
    //var start=setInterval(autoPlay,500);
    obj1.onmouseover=function(){//当鼠标光标停在图片上，则停止轮播
        clearInterval(start);
    }
    obj1.onmouseout=function(){//当鼠标光标停在图片上，则开始轮播
        start=setInterval(autoPlay,1000);
    }    
    for (var i = 0; i < len; i++) {
        var font = document.createElement('font')
        imgyuan.appendChild(font)
    }
    var lis = obj1.getElementsByTagName('font');//得到所有圆圈
    changeImg(0)
    var funny = function (i) {
        lis[i].onmouseover = function () {
            index=i
            changeImg(i)
        }
    }
    for (var i = 0; i < lis.length; i++) {
        funny(i);
    }

    function autoPlay(){
        if(index>len-1){
            index=0;
            clearInterval(start); //运行一轮后停止
        }
        changeImg(index++);
    }
    imgyuan.style.width= 25*len +"px";
    //对应圆圈和图片同步
    function changeImg(index) {
        var list = obj1.getElementsByTagName('img');
        var list1 = obj1.getElementsByTagName('font');
        for (i = 0; i < list.length; i++) {
            list[i].style.display = 'none';
            list1[i].style.backgroundColor = 'white';
        }
        list[index].style.display = 'block';
        list1[index].style.backgroundColor = 'blue';
    }
}
function hide_img(obj){
    obj.parentElement.style.display = "none";
    obj.parentElement.getElementsByClassName('imgyuan')[0].innerHTML = "";
}
</script>
<div class='heading'>
<h1>墨白的统计分析模块</h1>
<p class='attribute'><strong>开始时间:</strong> 2022-07-18 21:24:38</p>
<p class='attribute'><strong>耗时:</strong> 0:01:45.037644</p>
<p class='attribute'><strong>状态:</strong> <span class="tj passCase">Pass</span>:5 <span class="tj">通过率</span>:100.0%</p>

<p class='description'>用例执行情况</p>
</div>

<div class="piechart">
    <div>
        <canvas id="circle1" width="350" height="168" </canvas>
    </div>
</div>

<div id='show_detail_line' style=" float: left;  width: 100%;">
<a class="abstract detail_button" href='javascript:showCase(0,1)'>概要[100.00%]</a>
<a class="passed  detail_button" href='javascript:showCase(1,1)'>通过[5]</a>
<a class="failed  detail_button" href='javascript:showCase(2,1)'>失败[0]</a>
<a class="errored  detail_button" href='javascript:showCase(3,1)'>错误[0]</a>
<a class="skiped  detail_button"  href='javascript:showCase(4,1)'>跳过[0]</a>
<a class="all detail_button" href='javascript:showCase(5,1)'>所有[5]</a>
</div>
<table id='result_table'>
<colgroup>
<col align='left' />
<col align='right' />
<col align='right' />
<col align='right' />
<col align='right' />
<col align='right' />
<col align='right' />
</colgroup>
<tr id='header_row'>
    <th>测试组/测试用例</th>
    <th>总数</th>
    <th>通过</th>
    <th>失败</th>
    <th>错误</th>
    <th>视图</th>
    <th>错误截图</th>
</tr>

<tr class='passClass'>
    <td>case_mkgl_tjfx.TongJiFenXin</td>
    <td>5</td>
    <td>5</td>
    <td>0</td>
    <td>0</td>
    <td><a href="javascript:showClassDetail('c1.1',5)">详情</a></td>
    <td>&nbsp;</td>
</tr>

<tr id='pt1.1.1' class='hiddenRow'>
    <td><div class='testcase'>test_mkgl_kh_011</div></td>
    <td colspan='5' align='center'><span class='status passCase'>通过</span></td>
    <td>无截图</td>
</tr>

<tr id='pt1.1.2' class='hiddenRow'>
    <td><div class='testcase'>test_mkgl_kh_016</div></td>
    <td colspan='5' align='center'><span class='status passCase'>通过</span></td>
    <td>无截图</td>
</tr>

<tr id='pt1.1.3' class='hiddenRow'>
    <td><div class='testcase'>test_mkgl_sj_005</div></td>
    <td colspan='5' align='center'><span class='status passCase'>通过</span></td>
    <td>无截图</td>
</tr>

<tr id='pt1.1.4' class='hiddenRow'>
    <td><div class='testcase'>test_mkgl_sj_019</div></td>
    <td colspan='5' align='center'><span class='status passCase'>通过</span></td>
    <td>无截图</td>
</tr>

<tr id='pt1.1.5' class='hiddenRow'>
    <td><div class='testcase'>test_mkgl_xs_017</div></td>
    <td colspan='5' align='center'><span class='status passCase'>通过</span></td>
    <td>无截图</td>
</tr>

<tr id='total_row'>
    <th>统计</th>
    <th>5</th>
    <th>5</th>
    <th>0</th>
    <th>0</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
</tr>
</table>
<script>
    showCase(0,1);
    drawCircle('circle1',5, 0, 0,  0);
</script>

<div id='ending'>&nbsp;</div>
</body>
</html>
